<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-form ref="queryFormData" :model="queryFormData" inline size="small">
          <el-form-item label="类型">
            <el-select v-model="queryFormData.types">
              <el-option value="" label="全部"/>
              <el-option :value="0" label="MV"/>
              <el-option :value="1" label="翻唱"/>
              <el-option :value="2" label="影视"/>
              <el-option :value="3" label="舞蹈"/>
              <el-option :value="4" label="综艺"/>
              <el-option :value="5" label="现场"/>
            </el-select>
          </el-form-item>
          <el-form-item label="有效性">
            <el-select v-model="queryFormData.dataFlag">
              <el-option value="" label="全部"/>
              <el-option :value="0" label="有效"/>
              <el-option :value="1" label="无效"/>
            </el-select>
          </el-form-item>
          <el-button size="small" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button type="primary" size="small" icon="el-icon-circle-plus-outline"
                     @click="add">添加视频
          </el-button>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="tableData" size="mini" style="width: 100%">
        <el-table-column label="视频" width="320" align="center">
          <template slot-scope="{row}">
            <video :src="getUrl(row.url)" height="180px" width="320px" controls="controls"/>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" align="center"/>
        <el-table-column prop="typesStr" label="类型" width="150" align="center"/>
        <el-table-column prop="dataFlag" label="有效性" width="150" align="center">
          <template slot-scope="{row}">
            {{ row.dataFlag === 0 ? '有效' : '无效' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150" prop="operation">
          <template slot-scope="{row}">
            <el-button size="mini" @click="edit(row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next, total"
                       :current-page="pageNum" :page-size="pageSize" :total="total"/>
      </div>
    </div>
    <el-dialog :title="isAdd ? '添加视频' : '编辑视频'" v-if="centerDialogVisible" :visible.sync="centerDialogVisible"
               width="600px" @close="handleCancel" center :close-on-click-modal="false">
      <el-form :model="registerForm" ref="registerForm" label-width="80px" :rules="formRules" size="mini"
               v-loading="loading" label-position="left">
        <el-form-item label="视频" prop="video" class="is-required">
          <el-upload
              :action="upload"
              :show-file-list="false"
              :on-success="handleVideoUploadSuccess"
              :before-upload="beforeVideoUpload">
            <div style="width: 410px; display: flex; align-items: flex-end; justify-content: space-between;">
              <video :src="getUrl(registerForm.url)" v-if="registerForm.url" width="300px" height="200px" controls="controls" />
              <el-button size="small" type="primary">点击上传</el-button>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="标题" prop="title" class="is-required">
          <el-input type="textarea" v-model="registerForm.title" clearable/>
        </el-form-item>
        <el-form-item label="类型" prop="types" class="is-required">
          <el-checkbox-group v-model="registerForm.types">
            <el-checkbox v-for="item of VIDEO_TYPES" :key="item.key" :label="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="有效性" prop="dataFlag" class="is-required">
          <el-switch v-model="registerForm.dataFlag" :active-value="0" :inactive-value="1" active-text="生效"
                     inactive-text="失效"/>
        </el-form-item>
      </el-form>
      <span slot="footer">
                <el-button size="mini" @click="handleCancel">取消</el-button>
                <el-button type="primary" size="mini" @click="addVideo">确定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  mixin
} from '../mixins/index';
import {listVideo, getVideo, saveVideo} from '../api/index';
import {VIDEO_TYPES} from "@/constants";

export default {
  mixins: [mixin],
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: true,
      centerDialogVisible: false,
      queryFormData: {
        types: '',
        dataFlag: ''
      },
      VIDEO_TYPES,
      idAdd: false,
      registerForm: {
        url: '',
        title: '',
        types: [],
        dataFlag: ''
      },
      formRules: {
        url: [
          {required: true, message: '请输入视频地址', trigger: 'blur'}
        ],
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'}
        ],
        types: [
          {type: 'array', required: true, message: '请至少选择一个类型', trigger: 'change'}
        ]
      },

    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = true;
      const {queryFormData, pageNum, pageSize} = this;
      listVideo(queryFormData, pageNum, pageSize).then(res => {
        this.loading = false;
        const {data, total, success} = res;
        if (!success) {
          this.$message.error('查询失败');
          this.tableData = [];
          return;
        }
        this.tableData = data.map(e => {
          return {
            ...e,
            toggle: false
          }
        });
        this.total = total;
      })
    },
    search() {
      this.getData();
    },
    handleCurrentChange(currentPageNum) {
      this.pageNum = currentPageNum;
      this.getData();
    },
    add() {
      this.isAdd = true;
      this.centerDialogVisible = true;
      let obj = {
        img: '',
        title: '',
        types: [],
        dataFlag: ''
      };
      this.registerForm = JSON.parse(JSON.stringify(obj));
    },
    handleCancel() {
      this.centerDialogVisible = false;
      let obj = {
        img: '',
        title: '',
        types: [],
        dataFlag: ''
      };
      this.registerForm = JSON.parse(JSON.stringify(obj));
    },
    handleVideoUploadSuccess(res) {
      this.registerForm.url = res.data;
      this.$message({
        message: '上传成功',
        type: 'success'
      });
    },
    edit(id) {
      this.isAdd = false;
      this.centerDialogVisible = true;
      this.loading = true;
      getVideo(id).then(res => {
        const {
          data,
          success
        } = res;
        if (success) {
          this.loading = false;
          this.registerForm = {
            ...data
          };
        }
      })
    },
    addVideo() {
      this.$refs.registerForm.validate(isValid => {
        if (isValid) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          saveVideo(this.registerForm).then(res => {
            loading.close();
            const {
              success
            } = res;
            if (success) {
              this.$message.success("保存成功");
              this.centerDialogVisible = false;
              this.getData();
            } else {
              this.$message.error("保存失败");
            }
          });
        }
      });
    },

  }
}

</script>

<style scoped>
.img {
  width: 240px;
  height: 120px;
  margin-left: 10px;
}
</style>